import { Checkbox, Col, Popover, Row, Space, Tooltip } from 'antd';
import { observer } from 'mobx-react';
import { FC, ReactNode } from 'react';
import { CheckboxValueType } from 'antd/es/checkbox/Group';

import Button from '@components/Button';
import Icons from '@components/Icons';

import styles from './index.module.less';
import RbProTableStore from './stores';

export type ColumnsConfigBarContentProps = {
  /** 表格作用域 */
  store: RbProTableStore;

  /** 列配置 */
  columns: any[];
};

/** 动态列配置内容 */
const ColumnsConfigBarContent: FC<ColumnsConfigBarContentProps> = observer(({ columns, store }) => {
  return (
    <div className={styles.rbProTableColumnsSettingListWapper}>
      <div className={styles.rbProTableColumnsSettingHeader}>
        <div>
          <Checkbox
            indeterminate={store.columnsConfigBar.indeterminate}
            onChange={(e: any) => store.handleColumnsCheckAllChange(e)}
            checked={store.columnsConfigBar.checkAll}
          >
            列设置
          </Checkbox>
        </div>
        <div>
          <Button type="link" onClick={() => store.handleColumnsReset()}>
            重置
          </Button>
        </div>
      </div>
      <Checkbox.Group
        value={store.columnsConfigBar.checkedList}
        onChange={(checkedValues: CheckboxValueType[]) => store.handleColumnsChange(checkedValues)}
      >
        <Row style={{ paddingTop: 8 }}>
          {columns.map((column: any, index: number) => (
            <Col span={24} style={{ height: '1.5rem' }} key={index}>
              <Checkbox value={column.dataIndex}>
                <Tooltip placement="topLeft" title={column.title}>
                  <div className={styles.rbProTableColumnsSettingRow}>{column.title}</div>
                </Tooltip>
              </Checkbox>
            </Col>
          ))}
        </Row>
      </Checkbox.Group>
    </div>
  );
});

export type OperationBarProps = {
  /** 表格标题 */
  headerTitle?: ReactNode;

  /** 表格按钮操作栏 */
  toolBar?: any;

  /** 表格作用域 */
  store: RbProTableStore;

  /** 列配置 */
  columns: any[];
};

const OperationBar: FC<OperationBarProps> = ({ headerTitle, toolBar, columns, store }) => {
  return (
    <div className={styles.rbProTableToolBar}>
      <div>{headerTitle}</div>
      <div>
        <Space>
          <>
            {toolBar}
            <Tooltip title="刷新">
              <Button
                shape="circle"
                type="text"
                icon={<Icons type="RedoOutlined" />}
                onClick={() => store.query()}
              />
            </Tooltip>
            <Tooltip title="列设置">
              <Popover
                trigger="click"
                placement="bottomRight"
                content={<ColumnsConfigBarContent store={store} columns={columns} />}
              >
                <Button shape="circle" type="text" icon={<Icons type="SettingOutlined" />} />
              </Popover>
            </Tooltip>
          </>
        </Space>
      </div>
    </div>
  );
};

export default observer(OperationBar);
